<template>
  <div class="content access-set">
    <dc-header :page-to="'/membersShip'"
               :title="'角色权限'"
               :action-title="'保存'"
               @submit="_save">
    </dc-header>
    <div class="content-body">
    <div class="head-top mt20">
      <router-link :to="'/modifyRole/' + this.$route.params.roleCode + '/' + this.$route.params.roleName" tag="div">
        <dc-cell title="角色" :value="this.$route.params.roleName" bVal="true" isLink></dc-cell>
      </router-link>
      <div class="mt20 bg-white pt40" v-for="access in accessData">
        <dc-row type="flex" justify="space-around" align="middle">
          <dc-col span="11" class="text-left"><span class="num">{{access.menuCategoryName}}</span></dc-col>
          <dc-col span="11" class="text-right">
            <dc-checkbox @boxChecked="showGreen(access)" :status="access.categoryStatus" :checkVal="'全选'"></dc-checkbox>
          </dc-col>
        </dc-row>
        <div class="card-content mint-cell-wrapper">
          <!--<div class="card-sub-title">核心数据指标（首页）</div>-->
          <div class="card-content-inner">
            <span class="tag-inaccess" v-for="item in access.permissions" @click="changeColor(item,access)"
                  :class="{'tag-access':item.status==1}">{{item.menuName}}</span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import api from '../../common/api/member';
  import cell from '@/common/plugins/cell';
  import {col, row} from '@/common/Flex';
  import checkbox from '@/common/plugins/checkbox';
  import mintUi from '@/common/mintUi';
  export default {
    data () {
      return {
        greenBox: '1',
        accessData: [],
        modifyData: []
      };
    },
    mounted () {
      this.accessInter();
    },
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row,
      'dc-checkbox': checkbox
    },
    methods: {
      accessInter () {
        let data = {
          roleCode: this.$route.params.roleCode
        };
        api.getPowerList(data)
          .then(res => {
            this.accessData = res;
            this.accessData.forEach(function (item) {
              item.permissions.forEach(function (one) {
                one.roleId = data.roleCode;
              });
            });
          });
      },
      _save () {
        if (this.modifyData.length > 0) {
          api.modifyPower(this.modifyData)
            .then(res => {
              mintUi.openToast('修改成功');
              this.accessInter();
              this.modifyData = [];
            });
        }
      },
      changeOne (access, item, t, m) {
        access.permissions.forEach(function (mod) {
          if (mod.menuId === item.menuId) {
            if (mod.status === '1') {
              mod.status = '0';
            } else {
              mod.status = '1';
            }
          }
          if (mod.status === '1') {
            m = m + 1;
          }
        });
        if (m === t) {
          access.categoryStatus = '1';
        } else {
          access.categoryStatus = '0';
        }
      },
      changeColor (item, access) {
        if (this.modifyData.length > 0) {
          let arr = [];
          for (let i = 0; i < this.modifyData.length; i++) {
            if (access.menuCategory === this.modifyData[i].menuCategory) {
              let t = this.modifyData[i].permissions.length;
              let m = 0;
              this.changeOne(this.modifyData[i], item, t, m);
              break;
            } else {
              arr.push(this.modifyData[i]);
              let t = access.permissions.length;
              let m = 0;
              if (arr.length === this.modifyData.length) {
                this.changeOne(access, item, t, m);
                this.modifyData.push(access);
                break;
              }
            }
          }
        } else {
          let t = access.permissions.length;
          let m = 0;
          this.changeOne(access, item, t, m);
          this.modifyData.push(access);
        }
      },
      allChecked (bool, menuCgory) {
        this.accessData.forEach(function (item) {
          if (item.menuCategory === menuCgory) {
            item.permissions.forEach(function (one) {
              one.status = bool + '';
            });
          }
        });
      },
      showGreen (access) {
        if (access.categoryStatus === '1') {
          access.categoryStatus = '0';
          this.allChecked(access.categoryStatus, access.menuCategory);
          this.modifyData.push(access);
        } else {
          access.categoryStatus = '1';
          this.allChecked(access.categoryStatus, access.menuCategory);
          this.modifyData.push(access);
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .access-set {
    text-align: left;
    .num {
      font-size: px2rem(32px);
      color: #333;
    }
    .label {
      font-size: px2rem(32px);
      color: #888;
    }
    .card-content {
      margin-top: px2rem(30px);
      padding: 0;
      display: block;
      .card-sub-title {
        font-size: px2rem(28px);
        color: #333;
        font-weight: bold;
        padding: px2rem(30px) px2rem(24px) 0 px2rem(24px);
      }
      .card-content-inner {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        padding: px2rem(30px) px2rem(24px) 0 px2rem(24px);
      }
    }
    .pt20 {
      padding-top: px2rem(20px);
    }
  }
</style>
